<template>
  <div>
    <!-- 这里是个人中心上半部分 -->
    <div class="profile" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL +userInfo.head_img"
        alt
        class="avatar"
      />
      <img
        src="https://wx1.sinaimg.cn/mw690/dab20f8dgy1gfrw58arx0j22c0340b2b.jpg"
        alt
        class="avatar"
      />
      <div class="info">
        <div class="name">
          <!-- <span v-if="userInfo.gender == 1" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>-->
          <span
            class="iconfont"
            :class="{
                      iconxingbienan: userInfo.gender == 1,
                      iconxingbienv: userInfo.gender == 0
                  }"
          ></span>
          {{userInfo.nickname}}
        </div>
        <div v-if="userInfo.create_date" class="date">{{userInfo.create_date.split('T')[0]}}</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <!-- 以下是条形组件列表 -->
    <PersonalBar labelText="我的关注" descText="关注的用户" @handleClick="$router.push('/follows')" />
    <PersonalBar labelText="我的跟帖" descText="跟帖/回复" @handleClick="logLabel('跳转我的跟帖')" />
    <PersonalBar labelText="我的收藏" descText="文章/视频" @handleClick="$router.push('/star')" />
    <PersonalBar labelText="设置" @handleClick="$router.push('Edit')" />
    <PersonalBar labelText="退出登录" @handleClick="logout" />
  </div>
</template>

<script>
import PersonalBar from "@/components/PersonalBar";

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  components: {
    PersonalBar,
  },
  methods: {
    logLabel(label) {
      console.log(label);
    },
    logout() {
      // 1. 清理之前保存的登录状态
      // localStorage.removeItem 清除单个 本地储存数据
      // localStorage.clear 清除所有的本地储存
      localStorage.clear();
      // 2. 跳转页面
      // this.$router.push('/')
      // 退出时, 我不希望后面可以回来个人中心
      // 所以用 replce 替换 push 覆盖当前 个人中心的访问历史
      this.$router.replace("/");
    },
  },
  created() {
    console.log(localStorage.getItem("token"));
    console.log(localStorage.getItem("userId"));
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
      // 这个接口还需要带上 token 进行权限校验
    }).then((res) => {
      console.log(res.data);
      this.userInfo = res.data.data;
      console.log(this.userInfo);
    });
  },
};
</script>

<style lang="less" scoped>
.profile {
  padding: 24/360 * 100vw;
  display: flex;
  align-items: center;
  border-bottom: 4/360 * 100vw solid #e4e4e4;
  .avatar {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    // 可以用 object-fit: ; 属性决定显示方式
    // cover 在保持长宽比的情况下, 尽可能覆盖全部位置
    object-fit: cover;
    // contain 在保持长宽比的情况下, 尽可能显示图片
    // object-fit: contain;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 16/360 * 100vw;
    .name {
      font-size: 16/360 * 100vw;
    }
    .iconxingbienan {
      color: #71b1e1;
    }
    .iconxingbienv {
      color: #ea46ba;
    }
    .date {
      font-size: 14/360 * 100vw;
      color: #888;
      margin-top: 6/360 * 100vw;
    }
  }
}
</style>